import {Button, Card, Form, Input,message} from 'antd';
import styles from "./index.less";
import {uniqueId} from "lodash";
import {ModifyPasswordRequest} from "@/pages/user/SetPassword/service";

const SetPassword = () => {
    const onFinish = async (values: any) => {
        console.log('Success:', values);
        const res:AircasKB.ResponseType<AircasKB.SetPassword.ModifyPasswordResponse> = await ModifyPasswordRequest({
            ...values
        })
        if(res.code == 200){
            message.success("密码修改成功");
        }
    };
    return (
        <div className={styles.wrapper}>
            <Card
                title={<span className={styles.title}>修改密码</span>}
                className={styles.wrapper}
                size="small"
                bordered={false}
                key={uniqueId()}
                headStyle={{ borderBottom: 0 }}
            >
                <Form
                    name="basic"
                    labelCol={{ span: 2 }}
                    wrapperCol={{ span: 6 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    autoComplete="off"
                >
                    <Form.Item
                        label="旧密码"
                        name="password"
                        rules={[{ required: true, message: '请输入旧密码!' }]}
                    >
                        <Input.Password />
                    </Form.Item>
                    <Form.Item
                        label="新密码"
                        name="newPassword"
                        required
                        rules={[{
                            pattern:
                                /^(?![^a-zA-Z]+$)(?!\\D+$).{8,16}$/,
                            message: "8-16位字符，必须包括字母和数字",
                        }]}
                    >
                        <Input.Password />
                    </Form.Item>
                    <Form.Item
                        label="确认密码"
                        name="verifyPassword"
                        dependencies={['newPassword']}
                        required
                        rules={[
                            ({ getFieldValue }) => ({
                                validator(rule, value) {
                                    if (!value || getFieldValue('newPassword') === value) {
                                        return Promise.resolve();
                                    }
                                    return Promise.reject('新密码与确认新密码不同！');
                                },
                            }),
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 6, span: 8 }}>
                        <Button type="primary" htmlType="submit" >
                            确定修改
                        </Button>
                    </Form.Item>
                </Form>
            </Card>
        </div>

    )

}

export default SetPassword;